import React, { useEffect, useState } from 'react'
import { bannerList, serviceList } from "../service/homeService"
import { Swiper, Image, Grid } from 'antd-mobile'
import  {useNavigate} from "react-router-dom"


export default function Home(props:any) {
    const [bannerlist, setbannerlist] = useState([]);//轮播图的集合
    const [servicelist, setservicelist] = useState([]);//服务的集合
   let  navigate= useNavigate();

    let search = async () => {//页面加载请求数据
        let res = await bannerList({ type: 2 });
        let res2 = await serviceList({});
         console.log(res2);
        setbannerlist(res.data.rows);
        if (res2.data.rows.length > 9) {
            setservicelist(res2.data.rows.splice(0, 9).concat([{imgUrl:"/prod-api/profile/upload/image/2021/05/10/31a6533c-bf60-4890-9a25-b18db764776a.png",
             serviceName: "更多服务", id: 0,link:"service" }]));


        } else {
            setservicelist(res2.data.rows);
        }
    }

    useEffect(() => {
        search();
    }, []);
    let gotoPath  = (item:any)=>{
        navigate("/"+item.link);    
    }
    return (
        <div>
            <Swiper autoplay loop>
                {bannerlist.map((item: any) => {
                    return <Swiper.Item key={item.id}>
                        <div>
                            {/* {item.advImg} */}
                            <Image src={"/api2" + item.advImg} />
                        </div>
                    </Swiper.Item>
                })}
            </Swiper>
            <Grid columns={5} gap={8}>
                {servicelist.map((item: any) => {
                    return <Grid.Item key={item.id} onClick={()=>{
                        gotoPath(item);
                    }}>
                        <div className='servicebox'>
                            <Image src={"/api2" + item.imgUrl}></Image>
                            <p className='servicename'> {item.serviceName}</p>
                        </div>
                    </Grid.Item>
                })}
            </Grid>
        </div>
    )
}
